<template>
	<!-- 帮助中心 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m011}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="title2 mt-5 A-Medium ml-3" :class="model=='light'?'title2Light':''">
			{{i18n.m012}}
		</view>
		<view class="mx-3 mt-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<view v-for="(item, index) in list">
				<view @click="$tool.navTo(`/pages/fwb/fwb?type=${getNavType(item.viewName)}`)" class="list py-3 flex align-center mx-3"
					:class="model=='light'?'listLight':''">
					<view class="flex align-center">
						<view class="title" :class="model=='light'?'titleLight':''">
							{{ item.typeName }}
						</view>
					</view>
					<view class="content flex-1">
				
					</view>
					<view class="f0">
						<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		helpList
	} from '@/core/api/index.js';
	
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			helpList({}).then(res => {
				this.list = res.result;
			})
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine2');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			getNavType(viewName) {
				if(viewName == "帮助中心_常见问题_新手必读"){
					return "7";
				}
				
				if(viewName == "帮助中心_常见问题_账户及安全"){
					return "8";
				}
				
				if(viewName == "帮助中心_常见问题_防骗专栏"){
					return "9";
				}
				
				if(viewName == "帮助中心_常见问题_冲提币"){
					return "10";
				}
				
				if(viewName == "帮助中心_常见问题_买卖数字资产"){
					return "11";
				}
				
				if(viewName == "帮助中心_常见问题_交易"){
					return "12";
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title2 {
		font-size: 32rpx;
		color: #F7F7F7;
		margin-top: 24rpx;
	}

	.title2Light {
		color: #0E0F11;
	}

	.menuList {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;

		.list {
			border-bottom: 2rpx solid #1F2128;

			.icon1 {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.title {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.titleLight {
				color: #0E0F11;
			}

			.content {
				font-size: 20rpx;
				color: #5951BA;
				text-align: right;
			}

			.icon2 {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.menuListLight {
		background: #ffffff;
		border: 2rpx solid #F4F4F4;
	}
</style>